<!--
 * @Author: 赵成刚-运输单详情
-->
<template>
  <view class="sourcegoodsdetail-box">
    <view class="sourcegoodsdetail-item-big-box">
      <view class="card-box">
        <view class="u-flex u-row-between">
          <view class="u-flex"
            >货物信息<view class="card-icon-box">
              <view></view>
              <view></view>
            </view>
          </view>
          <image
            v-if="obj.nodeStatus"
            class="order-icon"
            :src="
              orderNodeStatusList.filter(
                (item) => item.type == obj.nodeStatus
              )[0].icon
            "
          />
        </view>
        <view v-for="(item, index) in formItemList.slice(0, 2)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view style="white-space: nowrap">{{ item.name }}</view>
            <view
              :style="{
                lineHeight: '34rpx',
                textAlign: 'right',
                marginLeft: '80rpx',
              }"
              >{{ item.value && item.value }}
            </view>
          </view>
          <Divider />
        </view>
        <view v-for="(item, index) in formItemList.slice(2, 10)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view style="white-space: nowrap">{{ item.name }}</view>
            <view
              :style="{
                lineHeight: '34rpx',
                textAlign: 'right',
                marginLeft: '80rpx',
              }"
              >{{ item.value && item.value }}
            </view>
          </view>
          <Divider />
        </view>
        <view>
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view>运输合同</view>
            <u-button
              style="margin-left: 300rpx"
              @click="handleDownliadContract"
              size="medium"
              type="primary"
              >预览</u-button
            >
          </view>
          <Divider />
        </view>
      </view>
      <view class="card-box">
        <view class="u-flex"
          >货主信息<view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <view v-for="(item, index) in formItemList.slice(10, 14)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view>{{ item.name }}</view>
            <view>{{ item.value && item.value }} </view>
          </view>
          <Divider />
        </view>
      </view>
      <view
        class="card-box"
        v-if="
          (obj.dispatchStatus == '2' &&
            (obj.nodeStatus == '6' || obj.nodeStatus == '7')) ||
          obj.dispatchStatus == '3' ||
          obj.dispatchStatus == '4'
        "
      >
        <view class="u-flex"
          >装货信息<view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <view v-for="(item, index) in formItemList.slice(14, 17)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view>{{ item.name }}</view>
            <image
              v-if="item.type == 'img' && item.value"
              class="img-box"
              :src="item.value"
              alt=""
              @click="previewImageF(item.value)"
            />
            <view v-else>{{ item.value && item.value }} </view>
          </view>
          <Divider />
        </view>
      </view>
      <view
        class="card-box"
        v-if="
          (obj.dispatchStatus == '2' && obj.nodeStatus == '7') ||
          obj.dispatchStatus == '3' ||
          obj.dispatchStatus == '4'
        "
      >
        <view class="u-flex"
          >到货信息<view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <view v-for="(item, index) in formItemList.slice(17, 21)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view>{{ item.name }}</view>
            <image
              v-if="item.type == 'img' && item.value"
              class="img-box"
              :src="item.value"
              alt=""
              @click="previewImageF(item.value)"
            />
            <view v-else>{{ item.value && item.value }} </view>
          </view>
          <Divider />
        </view>
      </view>
      <view class="card-box" v-if="obj.dispatchStatus == 4">
        <view class="u-flex"
          >运费信息<view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <view
          v-for="(item, index) in formItemList.slice(21, formItemList.length)"
          :key="index"
        >
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view>{{ item.name }}</view>
            <view
              @click="makePhone(item)"
              :style="item.type == 'Phone' ? 'color:#4F87FE' : ''"
              >{{ item.value && item.value }}
            </view>
          </view>
          <Divider />
        </view>
      </view>
    </view>
    <view
      class="fixed-btns"
      v-if="
        (obj.dispatchStatus == '2' && obj.nodeStatus == '4') ||
        obj.dispatchStatus == '4'
      "
    >
      <!-- <template v-if="obj.dispatchStatus == '1' && obj.nodeStatus == '2'">
        <u-button
          :plain="true"
          :custom-style="btnCalss2"
                    :throttle-time="0"
          @click="dispatchCancelSend"
        >
          取消接单
        </u-button>
      </template>
      <template v-if="obj.dispatchStatus == '1' && obj.nodeStatus == '2'">
        <u-button
          :plain="true"
          :custom-style="btnCalss21"
                    :throttle-time="0"
          @click="dispatchSend"
        >
          确认接单
        </u-button>
      </template> -->
      <template v-if="obj.dispatchStatus == '2' && obj.nodeStatus == '4'">
        <u-button
          :plain="true"
          :custom-style="btnCalss1"
          :throttle-time="0"
          @click="dispatchLoad"
        >
          确认装货
        </u-button>
      </template>
      <template
        v-if="
          obj.dispatchStatus == '2' &&
          obj.nodeStatus == '6' &&
          obj.planType == '2'
        "
      >
        <u-button
          :plain="true"
          :custom-style="btnCalss1"
          :throttle-time="0"
          @click="dispatchArrive"
        >
          确认到货
        </u-button>
      </template>
      <template
        v-if="
          obj.dispatchStatus == '3' &&
          obj.nodeStatus == '7' &&
          obj.planType == '1'
        "
      >
        <u-button
          :plain="true"
          :custom-style="btnCalss1"
          :throttle-time="0"
          @click="dispatchPhotoArrive"
        >
          到货磅单
        </u-button>
      </template>
      <template v-if="obj.dispatchStatus == '4' && obj.isEvaluate == 0">
        <u-button
          :plain="true"
          :custom-style="btnCalss1"
          :throttle-time="0"
          @click="dispatchEvaluate"
        >
          评价货主
        </u-button>
      </template>
      <!-- <template v-if="obj.dispatchStatus == '2' && obj.nodeStatus">
        <u-button
          :plain="true"
          :custom-style="btnCalss1"
                    :throttle-time="0"
          @click="dispatchFreight"
        >
          运费结算
        </u-button>
      </template> -->
    </view>
    <!-- 运费结算 -->
    <freightSettlementModal
      :freightSettlementShow="freightSettlementShow"
      @confirm="freightSettlementconfirm"
      @cancel="freightSettlementcancel"
    />
    <!-- 评价货主 -->
    <evaluatetheownerModal
      :staticObj="obj"
      :evaluatetheownerShow="evaluatetheownerShow"
      @evaluatetheownercancel="evaluatetheownercancel"
      @evaluatetheownerconfirm="evaluatetheownerconfirm"
    />
    <!-- 装货信息弹窗 -->
    <loadinginformationModal
      :loadinginformationShow="loadinginformationShow"
      @confirm="loadinginformationconfirm"
      @cancel="loadinginformationcancel"
    />
    <!-- 到货信息弹窗 -->
    <arrivalinformationModal
      :arrivalinformationModalShow="arrivalinformationModalShow"
      @confirm="arrivalinformationconfirm"
      @cancel="arrivalinformationcancel"
    />
    <!-- 到货信息图片弹窗 -->
    <arrivalinformationPhotoModal
      :arrivalinformationModalShow="arrivalinformationPhotoModalShow"
      @confirm="arrivalinformationPhotoconfirm"
      @cancel="arrivalinformationPhotocancel"
    />
  </view>
</template>
<script>
import httpEnum from './../../../common/httpEnum.js'
import freightSettlementModal from './components/freightSettlementModal.vue'
import evaluatetheownerModal from './components/evaluatetheownerModal.vue'
import loadinginformationModal from './components/loadinginformationModal.vue'
import arrivalinformationModal from './components/arrivalinformationModal.vue'
import arrivalinformationPhotoModal from './components/arrivalinformationPhotoModal.vue'
export default {
  name: 'waybilldetail',
  components: {
    freightSettlementModal,
    evaluatetheownerModal,
    loadinginformationModal,
    arrivalinformationModal,
    arrivalinformationPhotoModal,
  },
  data() {
    return {
      obj: {},
      id: undefined,
      btnCalss2: {
        marginRight: '20rpx',
        width: '335rpx',
        height: '80rpx',
        lineHeight: '80rpx',
        fontSize: '32rpx',
        background: '#fff',
        color: '#387cf9',
        boxSizing: 'border-box',
      },
      btnCalss21: {
        width: '335rpx',
        height: '80rpx',
        lineHeight: '80rpx',
        fontSize: '32rpx',
        background: '#378AFB',
        color: 'white',
        boxSizing: 'border-box',
      },
      btnCalss1: {
        width: '100%',
        height: '80rpx',
        lineHeight: '80rpx',
        fontSize: '32rpx',
        background: '#378AFB',
        color: 'white',
        boxSizing: 'border-box',
      },
      orderNodeStatusList: [
        { type: 1, icon: '../../../static/ordertobeconfirmed.png' },
        { type: 2, icon: '../../../static/ordertobeconfirmed-1.png' },
        { type: 3, icon: '../../../static/ordercancel2.png' },
        { type: 4, icon: '../../../static/ordertransforming-1.png' },
        { type: 5, icon: '../../../static/ordercancel1.png' },
        { type: 6, icon: '../../../static/ordertransforming-2.png' },
        { type: 7, icon: '../../../static/ordertransforming-3.png' },
        { type: 8, icon: '../../../static/orderpay1.png' },
        { type: 9, icon: '../../../static/orderpay2.png' },
        { type: 10, icon: '../../../static/orderfinish.png' },
        { type: 11, icon: '../../../static/orderpay4.png' },
        { type: 12, icon: '../../../static/ordercancel.png' },
      ],
      formItemList: [
        {
          name: '发货地',
          key: 'loadPlace',
          value: '',
        },
        {
          name: '目的地',
          key: 'targetPlace',
          value: '',
        },
        {
          name: '货源单号',
          key: 'sourceCode',
          value: '',
        },
        {
          name: '运输单号',
          key: 'dispatchCode',
          value: '',
        },
        {
          name: '货物名称',
          key: 'cargoName',
          value: '',
        },
        {
          name: '运费总价(元)',
          key: 'freightTotalPrice',
          value: '',
          // company: '元',
        },
        {
          name: '运费单价(元)',
          key: 'freightUnitPrice',
          value: '',
          // company: '元',
        },
        {
          name: '货物重量(吨)',
          key: 'planWeight',
          value: '',
          // company: '吨',
        },
        {
          name: '路损(‰)',
          key: 'roadLossValue',
          value: '',
          // company: '吨',
        },
        {
          name: '抢单时间',
          key: 'createAt',
          value: '',
        },
        {
          name: '公司名称',
          key: 'corpName',
          value: '',
        },
        {
          name: '货主姓名',
          key: 'shipperName',
          value: '',
        },
        {
          name: '综合评分',
          key: 'shipperEvaluate',
          value: '',
        },
        {
          name: '联系电话',
          key: 'shipperPhone',
          value: '',
        },
        {
          name: '装货重量(吨)',
          key: 'loadWeight',
          value: '',
        },
        {
          name: '原发磅单',
          key: 'loadPoundPhoto',
          value: '',
          type: 'img',
        },
        {
          name: '装货时间',
          key: 'loadAt',
          value: '',
        },
        {
          name: '到货重量(吨)',
          key: 'arriveWeight',
          value: '',
        },
        {
          name: '收货照片',
          key: 'arrivePhoto',
          value: '',
          type: 'img',
        },
        {
          name: '收货磅单',
          key: 'arrivePoundPhoto',
          value: '',
          type: 'img',
        },
        {
          name: '到货时间',
          key: 'arriveAt',
          value: '',
        },
        {
          name: '亏吨扣除',
          key: 'deductAmt',
          value: 0,
          company: '元',
        },
        {
          name: '扣减重量(吨)',
          key: 'deductWeight',
          value: '',
        },
        {
          name: '手续费',
          key: 'handleAmt',
          value: '',
          company: '元',
        },
        {
          name: '运费总计',
          key: 'settleAmt',
          value: '',
          company: '元',
        },
      ],
      freightSettlementShow: false, //运费结算弹窗
      evaluatetheownerShow: false, //评价货主弹窗
      loadinginformationShow: false, //装货信息弹窗
      arrivalinformationModalShow: false, //到货信息弹窗
      accessToken: uni.getStorageSync('userAccount'),
      arrivalinformationPhotoModalShow: false, //到货信息图片弹窗
    }
  },
  onLoad(options) {
    this.id = options.id
  },
  onShow() {
    uni.hideTabBar({})
    this.getDetailDataList()
  },
  methods: {
    // 预览合同
    handleDownliadContract() {
      const url = `${httpEnum.baseUploadUrl}/freight-business/freightSsqInfo/contract/download?contractId=${this.obj.contractId}`
      uni.showLoading({
        title: '加载中',
        mask: true,
      })
      let userAccount = uni.getStorageSync('userAccount')
      wx.downloadFile({
        url: url,
        header: {
          accessToken: userAccount,
          equipment: 'app',
        },
        success: function (res) {
          console.log(res)
          uni.hideLoading()
          var filePath = res.tempFilePath
          uni.showLoading({
            title: '正在打开',
            mask: true,
          })
          wx.openDocument({
            filePath: filePath,
            fileType: 'pdf',
            success: function (res) {
              console.log(res)
              uni.hideLoading()
              console.log('打开文档成功')
            },
            fail: function (err) {
              uni.hideLoading()
              console.log('fail:' + JSON.stringify(err))
            },
          })
        },
        fail: function (err) {
          uni.hideLoading()
          console.log('fail:' + JSON.stringify(err))
        },
      })
    },
    // 确认接单
    async dispatchSend() {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchConfirm',
        { dispatchId: this.id }
      )
      if (code == '0') {
        this.$api.msg('确认派单成功')
        this.getDetailDataList()
      } else {
        this.$api.msg(message)
      }
    },
    // 取消接单
    async dispatchCancelSend() {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchCancel',
        { dispatchId: this.id }
      )
      if (code == '0') {
        this.$api.msg('取消派单成功')
        this.getDetailDataList()
      } else {
        this.$api.msg(message)
      }
    },
    //装货弹窗-开启
    dispatchLoad() {
      this.loadinginformationShow = true
    },
    //装货弹窗-取消
    loadinginformationcancel() {
      this.loadinginformationShow = false
    },
    //装货弹窗-确认
    loadinginformationconfirm(val) {
      this.handleLoadConfirm(val)
    },
    //装货-接口
    async handleLoadConfirm(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchLoad',
        { dispatchId: this.id, ...val }
      )
      if (code == '0') {
        this.$api.msg(`装货成功`)
        this.loadinginformationShow = false
        this.getDetailDataList()
      } else {
        this.$api.msg(message)
      }
    },
    // 到货弹窗-开启
    dispatchArrive() {
      this.arrivalinformationModalShow = true
    },
    //到货弹窗-取消
    arrivalinformationcancel() {
      this.arrivalinformationModalShow = false
    },
    //到货弹窗-确认
    arrivalinformationconfirm(val) {
      this.handleArriveConfirm(val)
    },
    //到货-接口
    async handleArriveConfirm(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchArrive',
        { dispatchId: this.id, ...val }
      )
      if (code == '0') {
        this.$api.msg(`到货成功`)
        this.arrivalinformationModalShow = false
        this.getDetailDataList()
      } else {
        this.$api.msg(message)
      }
    },
    //到货信息图片弹窗-开启
    dispatchPhotoArrive() {
      this.arrivalinformationPhotoModalShow = true
    },
    //到货信息图片弹窗-确认
    arrivalinformationPhotoconfirm(val) {
      this.handleArrivePhotoConfirm(val)
    },
    //到货信息图片弹窗-取 消
    arrivalinformationPhotocancel() {
      this.arrivalinformationPhotoModalShow = false
    },
    //到货图片-接口
    async handleArrivePhotoConfirm(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/uploadArrivePic',
        { dispatchId: this.obj.dispatchId, ...val }
      )
      if (code == '0') {
        this.$api.msg(`到货磅单上传成功`)
        this.arrivalinformationPhotoModalShow = false
        this.getDetailDataList()
      } else {
        this.$api.msg(message)
      }
    },
    // 评价货主-开启
    dispatchEvaluate() {
      this.evaluatetheownerShow = true
    },
    //评价货主-取消
    evaluatetheownercancel() {
      this.evaluatetheownerShow = false
    },
    //评价货主-确认
    evaluatetheownerconfirm(val) {
      this.handleEvaluateConfirm(val)
    },
    // 评价司机确认
    async handleEvaluateConfirm(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchEvaluate',
        {
          dispatchId: this.id,
          evaluate: val,
          evaluateId: this.obj.evaluateId,
        }
      )
      if (code == '0') {
        this.$api.msg('评价成功')
        this.evaluatetheownerShow = false
        this.getDetailDataList()
      } else {
        this.$api.msg(message)
      }
    },
    // 运费结算-开启
    dispatchFreight() {
      this.freightSettlementShow = true
    },
    //运费结算-确认
    freightSettlementconfirm() {
      this.freightSettlementShow = false
    },
    //运费结算-取消
    freightSettlementcancel() {
      this.freightSettlementShow = false
    },
    //图片预览大图
    previewImageF(val) {
      uni.previewImage({
        current: val, // 当前显示图片的 http 链接
        urls: [val], // 需要预览的图片 http 链接列表
      })
    },
    //查询订单
    async getDetailDataList() {
      const params = {
        dispatchId: this.id,
      }
      const { code, result, message } = await this.$u.get(
        '/freight-business/freightDispatch/driver/app/dispatchDetail',
        params
      )
      if (code === '0') {
        this.obj = result
        this.formItemList.forEach((item) => {
          for (const key in result) {
            if (Object.prototype.hasOwnProperty.call(result, key)) {
              if (item.key === key && result[key]) {
                item.value = result[key]
                if (
                  item.key == 'loadPoundPhoto' ||
                  item.key == 'arrivePhoto' ||
                  item.key == 'arrivePoundPhoto'
                ) {
                  item.value = result[key]
                    ? httpEnum.baseImgUrl +
                      '/logistics-control-platform' +
                      result[key]
                    : ''
                }
              }
            }
          }
        })
      } else {
        this.$api.msg(message)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.sourcegoodsdetail-box {
  background-color: rgb(238, 238, 239);
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 16rpx 30rpx;
  .modal1 {
    ::v-deep .u-model {
      background-color: transparent !important;
    }
    ::v-deep .u-mode-center-box {
      background-color: transparent !important;
    }
  }
  .sourcegoodsdetail-item-box {
    border-bottom: 1px solid #f2f2f2;
    line-height: 80rpx;
  }
  .sourcegoodsdetail-item-box:last-child {
    border: none;
  }
  .sourcegoodsdetail-item-big-box {
    flex: 1;
    overflow: hidden;
    overflow-y: scroll;
  }
  .card-box {
    position: relative;
    background: white;
    margin-bottom: 24rpx;
    border-radius: 10rpx;
    padding: 24rpx 24rpx 0;
    .card-title-box {
      font-size: 28rpx;
      font-weight: 600;
    }
    .card-icon-box {
      margin-left: 6rpx;
      position: relative;
      view:nth-child(1) {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #57a3ff;
        position: absolute;
        top: -12rpx;
        left: 10rpx;
        z-index: 1;
      }
      view:nth-child(2) {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #add3ff;
        position: absolute;
        top: -6rpx;
        left: 20rpx;
      }
    }
    .img-box {
      width: 240rpx;
      height: 240rpx;
    }
    image {
      width: 115rpx;
      height: 108rpx;
    }
  }
  .card-box:last-child {
    margin-bottom: 0rpx;
  }
  .sourcegoodsdetail-index-btn {
    width: 90%;
    position: flex;
    bottom: 16rpx;
  }
  .uploadPhotosShow-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    view {
      font-size: 36rpx;
      padding: 10rpx 0;
    }
  }
}

.car-btn {
  position: absolute;
  top: 21rpx;
  right: 24rpx;
  width: 128rpx;
  height: 48rpx;
  background: #387cf9;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #ffffff;
}
.fixed-btns {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 30rpx 0 10rpx 0;
}
.order-icon {
  width: 115rpx;
  height: 108rpx;
}
.img-box {
  width: 115rpx;
  height: 108rpx;
  margin: 10rpx;
}
</style>
